import { Link } from '@brillout/docpress'

Create server middleware for development with <Link href="/glossary#hmr">HMR</Link> and <Link href="/lazy-transpiling">lazy transpiling</Link>.

> You don't need `createDevMiddleware()` if you use <Link href="/vike-photon">`vike-photon`</Link>. (You also don't need it if you <Link href="/pre-rendering">pre-render</Link> and don't use a server at all.)

```ts
import { createDevMiddleware } from 'vike/server'

const {
  devMiddleware, // The development middleware
  viteConfig, // Resolved Vite configuration
  viteServer // Vite's development server
} = await createDevMiddleware({
  root: './path/to/app', // (optional, but recommended)
  viteConfig: {
    // Some Vite configuration (optional)
  }
})
```

See <Link href="/renderPage#usage">usage example</Link> for how to use it.

Vite types:
- [InlineConfig](https://vite.dev/guide/api-javascript.html#inlineconfig) types the `viteConfig` option.
- [ResolvedConfig](https://vite.dev/guide/api-javascript.html#resolvedconfig) types the `viteConfig` return value.
- `createDevMiddleware()` wraps [Vite's `createServer()`](https://vite.dev/guide/api-javascript.html#createserver).
- `devMiddleware` is a [`Connect` middleware](https://www.npmjs.com/package/connect) which is provided by Vite, see also [#2081 - Interoperable createDevMiddleware that also works with Web Standards](https://github.com/vikejs/vike/issues/2081).


## See also

- <Link href="/renderPage" />
- <Link href="/api" />
